<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
    <div class="table-page-search-wrapper">
      <a-row>
        <a-form layout="inline">
          <a-col :span="6" style="margin-left: 10px">
            <a-form-item label="客户姓名">
              <a-input placeholder="请输入客户姓名" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6" style="margin-left: 10px">
            <a-form-model-item label="电话" prop="asyncSelectValue">
              <a-input placeholder="请输入客户电话" v-model="queryParam.phone"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="6" style="margin-left: 10px">
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            <a-button type="primary" @click="resetSearch" icon="reload" style="margin-left: 8px">重置</a-button>
          </a-col>
        </a-form>
      </a-row>
    </div>
    <a-table
      size="middle"
      :scroll="{x:true}"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :rowSelection="{ type: 'radio', selectedRowKeys: selectedRowKeys, onSelect: onSelect, onChange: onSelectChange }"
      @change="handleTableChange">
    </a-table>
  </j-modal>
</template>

<script>
import { getAction } from '@/api/manage'
export default {
  name: 'CustomerInfoList',
  comments: {
  },
  data () {
    return {
      title:'',
      width:'80%',
      visible: false,
      disableSubmit: false,
      dataSource: [],
      selectedRowKeys: [],
      selectionRows: '',
      queryParam: {},
      columns:[
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '客户姓名',
          align: "center",
          dataIndex: 'name',
          slots: { title: 'customTitle' },
          scopedSlots: {
            customRender: 'name'
          },
        },
        {
          title: '项目地址',
          align: "center",
          dataIndex: 'address'
        },
        {
          title: '电话',
          align: "center",
          dataIndex: 'phone'
        },
        {
          title: '添加时间',
          align: "center",
          dataIndex: 'createTime'
        },
        {
          title: '创建人',
          align: "center",
          dataIndex: 'createBy'
        },
      ],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      loading: false,
      url: {
        list: "/ghCustomerInfo/list"
      }
    }
  },
  methods: {
    handleOk() {
      if(this.selectionRows == null || this.selectionRows === '') {
        this.$message.warning("请选择一条数据")
        return;
      }
      this.$emit('ok', this.selectionRows);
      this.visible = false;
    },
    onSelect(record) {
      this.selectionRows = record;
    },
    handleCancel() {
      this.visible = false;
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    loadData() {
      this.loading = true
      let params = this.queryParam
      this.$set(params, 'pageNo', this.ipagination.current)
      this.$set(params, 'pageSize', this.ipagination.pageSize)
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleTableChange(pagination) {
      this.ipagination = pagination;
      this.loadData();
    },
    searchQuery() {
      this.loadData();
    },
    resetSearch(){
      this.queryParam = {}
      this.loadData();
    },
  }
}

</script>